<template>
<el-carousel indicator-position="outside" height="550px" class="lbt">
    <el-carousel-item v-for="item in imagesbox" :key="item.id">
      <el-row>
        <el-col :span="6">
             <div class="lbttext">
               <span style="line-height:550px;">{{item.test}}</span>
             </div>
        </el-col>
        <el-col :span="18">
          <div style="position: absolute;z-index:2;height:550px;width:180px;">
            <img src="../assets/lbt.png" > 
          </div>
          <div style="position: absolute;z-index:1;width:1138px;">
            <img :src="item.idView" class="image">
          </div>   
        </el-col>
      </el-row>
    </el-carousel-item>
  </el-carousel>
<div style="margin-left: 120px;margin-right: 120px;">
<!--轮播图 -->
<el-divider></el-divider>

<h2 class="yahei">北软近况</h2>
<div class="news">
  <ul class="newslist">
    <el-row :gutter="30">
      <el-col :span="8" v-for="item in recent" :key="item.id">
          <li>
              <div class="ydate ydate_2" id="div_ydate_1">
                <span>10</span>2021.11
              </div>
              <div class="tn">                
                <h4><a :href="item.href">{{ item.text }}</a></h4>                                  
                <p>{{ item.text2 }}</p>                         
              </div>
          </li>
      </el-col>
    </el-row>
  </ul>
</div>

<el-divider></el-divider>

<div class="focus">
  <h2 class="yahei">校园关注</h2>
  <ul class="focuslist">
    <el-row :gutter="30">
      <el-col :span="8" v-for="item in focus" :key="item.id">
          <li>
              <div class="tn">                
                <h4><a :href="item.href">{{ item.text }}</a></h4>                                  
                <p>{{ item.text2 }}</p>                         
              </div>
          </li>
      </el-col>
    </el-row>
  </ul>
</div>

<el-divider></el-divider>

<!--更多 &gt;  -->
  <h2 class="yahei">校园活动</h2><a class="more"></a>
      <el-row :gutter="20">
        <el-col :span="8" v-for="item in news" :key="item.id">
          <div class="grid-content bg-purple" style="margin:30px;">
              <div class="box">
                <a href="#" :title="item.title">
                  <div class="pic"><img :src="item.img"></div>
                  <div class="img"></div>
                  <div class="text">
                    <h5>{{ item.text }}</h5>
                  </div>
                </a>
              </div>
          </div>
        </el-col>
      </el-row>
</div>

</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({

  setup() {
    const activeIndex = ref('1')
    const activeIndex2 = ref('1')
    const handleSelect = (key, keyPath) => {
      console.log(key, keyPath)
    }
    return {
        imagesbox:
        [
          {id:0,idView:require("../assets/6.jpg"),test:"测试"},  
          {id:1,idView:require("../assets/life2.jpg"),test:"测试"},
          {id:2,idView:require("../assets/life4.jpg"),test:"测试"},
          {id:3,idView:require("../assets/life5.jpg"),test:"测试"},
          {id:4,idView:require("../assets/f1.jpg"),test:"测试"},
          {id:5,idView:require("../assets/f2.jpg"),test:"测试"},

        ],
        news:
        [
          {id:0,titel:"系部活动 | 北软计算机系程序设计大赛周赛入围名单",text:"系部活动 | 北软计算机系程序设计大赛周赛入围名单",img:require("../assets/pic.png")},  
          {id:1,titel:"系部活动|做好垃圾分类，共创校园文明新风",text:"系部活动|做好垃圾分类，共创校园文明新风",img:require("../assets/xb1.jpg")},
          {id:2,titel:"系部活动 | 扫雪情意浓，除冰暖人心",text:"系部活动 | 扫雪情意浓，除冰暖人心",img:require("../assets/xb2.png")},
          {id:3,titel:"系部活动|1＋X前端证书分享会来了",text:"系部活动|1＋X前端证书分享会来了",img:require("../assets/xb3.png")},
          {id:4,titel:"系部活动|“做好人生简历 赢取职场成功 ”",text:"系部活动|“做好人生简历 赢取职场成功 ”",img:require("../assets/pic.png")},
          {id:5,titel:"系部活动 | 计算机系海报设计大赛获奖名单",text:"系部活动 | 计算机系海报设计大赛获奖名单",img:require("../assets/pic.png")},
        ],
        recent:
        [
          {id:0,href:"https://mp.weixin.qq.com/s/NgF8ku3VOPfvUd9u4YOTGQ",text:"暴雪面前勇担当，今日北软学子，明日祖国栋梁！",text2:""},
          {id:1,href:"https://mp.weixin.qq.com/s/6xebvNdPQjzf5M0c6r7Y4A",text:"图书分享会——一场视听盛宴",text2:"沈阳北软信息职业技术学院第一届  “通识阅读”读书分享会圆满结束"},
          {id:2,href:"https://mp.weixin.qq.com/s/bRUruA3Lh9BvKmeafeyEFA",text:"图解十九届六中全会公报全文",text2:""},
        ],
        focus:
        [
          {id:0,href:"https://mp.weixin.qq.com/s/rwX8Mw-2ZUGlnmGi3HswyQ",text:"北软计算机系举办程序设计大赛",text2:"计算机系软件协会为进一步提高大学生计算机知识的应用能力，为学生提供一个相互学习、 充分展示自己程序设计能力的平台，经研究决定将面向全体计算机系学生开展 2021-2022 学年度第一学期计算机系程序设计大赛。沈阳北软信息职业技术学院计算机系全体学生，均可参加······"},
          {id:1,href:"https://mp.weixin.qq.com/s/I-7hxKEpWozITxaJUccTJA",text:"喜报|计算机专业群再次获批辽宁省兴辽卓越专业群建设立项",text2:"本次项目获批，充分体现了我系在计算机专业群的专业优势，我系也将以此为契机，充分发挥我系产教融合优势，实现人才培养供给侧和产业需求侧结构要素全方位融合，为服务辽宁全面振兴全方位振兴提供有力人才和技能支撑······"},
          {id:2,href:"https://mp.weixin.qq.com/s/3sBw8ysUukhX2Z0x23kpfA",text:"系部活动|“做好人生简历 赢取职场成功 ”",text2:"简历，被喻为是求职成功的第一块敲门砖，它好比是应聘者的脸，优势和劣势全都写在这张脸上，一个成功的求职者背后必有一份优秀的简历，简历的优劣在很大程度上影响着你的应聘成败。为了提高我系同学的简历制作能力，进而提高我系的就业率，因此计算机系特举办此次“做好人生简历 赢取职场成功 ”简历设计大赛······"},
        ],
      activeIndex,
      activeIndex2,
      handleSelect,
    }
  },
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.image{
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.lbt{
  margin: -20px;
  padding: 0;

}
.lbt img{
  height: 550px;
  width: 100%;
}
.lbttext{
  background: #4C256B;
  height: 550px;
  width: 100%;
  color: #fff;
}
.more {
    float: right;
    font-size: 12px;
    font-family: sans-serif;
    color: #999;
    margin-right: 22px;
    text-decoration: none;    
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
